import React, { Component } from 'react';
import { connect } from 'dva';
import LoginForm from '@/components/Login/LoginForm';
import Code from '@/components/Login/Code';
import Avatar from '@/components/Login/Avatar';
import styles from './styles/index.less';
import { Card } from 'antd';


class Login extends Component {
  constructor(props) {
    super(props)
    this.state = {
      activeKey: 'normal'
    }
  }

  onTabChange = (key) => {
    this.setState({ activeKey: key });
  }

  render () {
    const tabList = [{
      key: 'normal',
      tab: '普通登录',
    }, {
      key: 'code',
      tab: '扫码登录',
    }];

    const contentList = {
      normal: (<div><Avatar /><LoginForm {...this.props} /></div>),
      code: (<div><Code /></div>)
    };

    return (

      <div className={styles.container}>
        <Card bordered={false} hoverable={true} bodyStyle={{ height: "335px" }}
          tabList={tabList}
          activeTabKey={this.state.activeKey}
          onTabChange={(key) => { this.onTabChange(key) }}>
          {contentList[this.state.activeKey]}
        </Card>
      </div>
    )
  }
}

export default connect(({ loading }) => ({ loading }))(Login);
